<template>
    <!-- visible.async不适用于props情况 -->
    <el-dialog :title="title" :visible="dialogVisible" width="500px" append-to-body @close="cancel" v-dialogDrag>
        <!-- 添加或修改角色配置对话框 -->
        <el-form ref="sonRoleRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="form.roleName" placeholder="请输入角色名称" />
            </el-form-item>
            <!-- <el-form-item prop="roleCode">
          <template #label>
            <span>
              <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
              权限字符
            </span>
          </template>
          <el-input v-model="form.roleCode" placeholder="请输入权限字符" />
        </el-form-item> -->
            <el-form-item label="角色编码" prop="roleCode">
                <!-- <el-input-number v-model="form.roleCode" controls-position="right" :min="0" /> -->
                <el-input v-model="form.roleCode" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="form.flags">
                    <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
                    }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单权限">
                <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
                <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
                <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
                <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menuRef" node-key="businessId"
                    :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup name="AddRole">
import { Ref, ref, watch } from "vue";
import { Message, Tree } from "element-ui";
import { dictTypeInit } from "../dict/data";
import { listMenu } from "@/requests/api/menu";
import { useHandleTree } from "./HandleTree";
import { addRole, updateRole } from "@/requests/api/role";

const props = defineProps({
    form: {
        type: Object, default: () => {
            return {
                roleName: "",
                roleCode: "",
                flags: 0,
                remark: "",
                businessId: ""
            }
        }
    },
    roleRef: Object,
    sys_normal_disable: {
        type: Array<any>, default: () => {
            return dictTypeInit
        }
    },
    title: String,
    open: Boolean,
});
// const dialogVisible = computed(() => props.open); // Write operation failed: computed value is readonly computed为只读的，和:visible.sync冲突
const dialogVisible = ref(false);
watch(() => props.open, (n) => {
    // console.log('打开界面', n, o)
    dialogVisible.value = n
}, { immediate: true });
const sonRoleRef: Ref<any> = ref(null);
watch(() => props.roleRef, (n, o) => {
    console.log('变化ref', n, o)
    sonRoleRef.value = n
}, { immediate: true, deep: true });
const emit = defineEmits(["submitForm", "cancel"]);
const rules = ref({
    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
    roleCode: [{ required: true, message: "角色编码不能为空", trigger: "blur" }]
});

/** 提交按钮 */
function submitForm() {
    sonRoleRef.value.validate((valid: boolean) => {
        if (valid) {
            console.log('form', props.form)
            if (props.form.businessId != undefined) {
                // form.value.menuIds = getMenuAllCheckedKeys();
                updateRole(props.form).then(() => {
                    Message.success("修改成功");
                });
            } else {
                // form.value.menuIds = getMenuAllCheckedKeys();
                addRole(props.form).then(() => {
                    Message.success("新增成功");
                });
            }

            emit('submitForm')
        }
    });
}
/** 取消按钮 */
function cancel() {
    emit('cancel')
};

/**************以下未用到*****************/
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const menuRef: Ref<InstanceType<typeof Tree> | null> = ref(null)
// const menuRef: any = ref(null);
const {
    handleCheckedTreeExpand,
    handleCheckedTreeNodeAll,
    handleCheckedTreeConnect,
} = useHandleTree(menuOptions, menuRef, props.form);
const defaultProps = ref({
    children: "children",
    label: "resourceName"
});

// /** 查询菜单树结构 */
const getMenuTreeselect = async () => {
    const res: any = await listMenu()
    menuOptions.value = res.data;
};

defineExpose({
    getMenuTreeselect
});
</script>
<style lang="scss" scoped></style>